<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>技术</title>
        <style>
             *{
                 margin: 0px;
                 padding: 0px;
                 list-style: none;
             }
             td{
                 border: 1px solid skyblue;
                 line-height: 30px;
                 width: 150px;
                 text-align: center;
             }
             table{
                 border-collapse: collapse;
                 margin: 0px auto;
             }
             .head{
                 font-weight: bold;
                 font-size: 18px;
                 background: skyblue;
             }
             input{
                 width: 300px;
                 margin: 10px auto;
                 display: block;
             }
             button{
                 background: pink;
                 width: 300px;
                 display: block;
                 margin: 10px auto;
                 border: none;
                 cursor: pointer;
                 line-height: 40px;
                 color: white;
             }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入商品" id="pro">
        <input type="text" placeholder="请输入价格" id="price">
        <button id="btn">发布商品</button>

        <table id="box">
            <tr class="head">
                <td>商品名字</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>补充</td>
                <td>性能</td>
            </tr>
            <tr>
                <td>华为</td>
                <td>7100</td>
                <td>100</td>
                <td>20</td>
                <td>还行</td>
            </tr>
        </table>

        <script>

            btn.onclick=function(){

                var product=pro.value;
                var p=price.value;
                var tag=document.createElement('tr');
                tag.innerHTML=`<td>${product}</td>
                <td>${p}</td>
                <td>5</td>
                <td>15</td>
                <td>还可以</td>`;
                box.appendChild(tag)
            }
        
        </script>
        
    </body>
</html>